<template>
    <div>
        <h1>Hello</h1>
        <div>
            年龄:{{userStore.age}}
            性别:{{userStore.gender}}
            {{userStore.isOlder}}
            <button @click="userStore.setAgeUp(3)">+3</button>
            <button @click="userStore.setAgeDown(5)">-5</button>
            <button @click="userStore.age=50">直接修改</button>
            <button @click="patchEdit">批量修改</button>
        </div>
        <div>
            调用countStore:
            num:{{counterStore.num}}
            {{counterStore.isOdd}}
            <button @click="counterStore.add(3)">add +3</button>
            <button @click="counterStore.asyncAdd(2)">add +2</button>
        </div>
    </div>
</template>

<!-- 组合式API -->
<script setup>
import {computed,watch} from 'vue'
import useUserStore from '../store/useUserStore';
import useMyCounterStore from '../store/useMyCounterStore'
let userStore=useUserStore();
//调用组合式Store对象
let counterStore=useMyCounterStore();
let age=computed(()=>{
    userStore.age.value;
});
let patchEdit=()=>{
    //分开修改  vue-devtoole提交了两次
    // userStore.age=30;
    // userStore.gender="女"
    //合并修改 批量修改 提交一次 性能更好
    // userStore.$patch({
    //     age:30,
    //     gender:"女"
    // })
    // userStore.$patch({
    //     age:userStore.age+1,
    //     gender:userStore.gender=="男"?"女":"男"
    // })
    userStore.$patch((state)=>{
        state.age++;
        state.gender=state.gender=="男"?"女":"男";
    });
}
//watch(xxx,()=>{})
//watch(()=>xxx,()=>{})
watch(()=>userStore.age,(newValue,oldValue)=>{
    console.log("new Value age===>",newValue);
})
</script>

<style lang="scss" scoped>

</style>